<template>
  <div class="sts">
    <a-row :gutter="24">
      <!-- <a-col :sm="24"
             :md="12"
             :xl="8"
             :style="{ marginBottom: '24px' }">
        <chart-card title="报名/访客数"
                    :total="`1212/${allSale.allVisitor}`"
                    :loading="loadingSale">
          <div>
            <Browse />
          </div>
          <template slot="footer">日访问量<span> {{ allSale.dayVisitor }}</span></template>
        </chart-card>
      </a-col> -->
      <a-col :sm="24"
             :md="12"
             :xl="8"
             :style="{ marginBottom: '24px' }">
        <a-card style="width: 100%;"
                :bordered="false"
                :loading="loadingSale"
                class="top__card">
          <p class="top__card--content">
            <span class="icon">
              <i class="iconfont  icon-renshu"></i>
            </span>
            报名人数 <span class="num">{{ allSale.signNum }}</span>
          </p>
        </a-card>
      </a-col>

      <a-col :sm="24"
             :md="12"
             :xl="8"
             :style="{ marginBottom: '24px' }">
        <a-card style="width: 100%;"
                :bordered="false"
                :loading="loadingSale"
                class="top__card">
          <p class="top__card--content">
            <span class="icon">
              <i class="iconfont icon-zongji"></i>
            </span>
            已回答人数 <span class="num" v-if="allSale.replyNum > 0">{{ allSale.replyNum }}</span>
            <span class="num" v-else>-</span>
          </p>
        </a-card>
      </a-col>

      <a-col :sm="24"
             :md="12"
             :xl="8"
             :style="{ marginBottom: '24px' }">
        <a-card style="width: 100%;"
                :bordered="false"
                class="top__card">
          <p class="top__card--content">
            <span class="icon">
              <i class="iconfont icon-bili"></i>
            </span>
            回答率 <span class="num" v-if="parseFloat(allSale.replyRatio) > 0">{{ allSale.replyRatio }}%</span>
            <span class="num" v-else>-</span>
          </p>
        </a-card>
      </a-col>

    </a-row>

    <a-row :gutter="15">
      <a-col :span="24">
        <a-card :bordered="false"
                :body-style="{padding: '0'}">
          <a-tabs v-model="tabActive"
                  @change="onTabChange">
            <div class="extra-wrapper"
                 slot="tabBarExtraContent">
              <a-radio-group style="margin-bottom:10px"
                             v-model="currInstance"
                             @change="handleChange">
                <a-radio-button v-for="(item,index) in instanceList"
                                :key="index"
                                :value="item.instanceId">
                  {{ item.instanceName }}
                </a-radio-button>
              </a-radio-group>

            </div>
            <a-tab-pane key="1"
                        tab="试卷分析"
                        class="tab__content">
              <a-row :gutter="10">
                <a-col :span="16">
                  <a-descriptions style="margin-bottom:10px">
                    <a-descriptions-item>
                      <template v-slot:label>
                        <span>试卷名称</span>
                      </template>
                      {{ currInstanceInfo.instanceName }}
                    </a-descriptions-item>
                    <a-descriptions-item label="题目数量">
                      {{ currInstanceInfo.instanceNum }}
                    </a-descriptions-item>

                    <a-descriptions-item label="最高分">
                      {{ currInstanceInfo.scoreHighest }}
                    </a-descriptions-item>
                    <a-descriptions-item label="最低分">
                      {{ currInstanceInfo.scoreLowest }}
                    </a-descriptions-item>
                    <a-descriptions-item label="平均分">
                      {{ currInstanceInfo.scoreAverage }}
                    </a-descriptions-item>
                    <a-descriptions-item label="中位数">
                      {{ currInstanceInfo.scoreMiddle }}
                    </a-descriptions-item>
                    <a-descriptions-item label="已答人数">
                      {{ currInstanceInfo.answerNum }}
                    </a-descriptions-item>
                    <a-descriptions-item label="未答人数">
                      {{ currInstanceInfo.noAnswerNum }}
                    </a-descriptions-item>
                    <a-descriptions-item label="正确率">
                      {{ currInstanceInfo.accuracyRat }}%
                    </a-descriptions-item>
                    <a-descriptions-item label="最高难度">
                      {{ currInstanceInfo.queHardest }}
                    </a-descriptions-item>
                    <a-descriptions-item label="最低难度">
                      {{ currInstanceInfo.queSimplest }}
                    </a-descriptions-item>
                  </a-descriptions>
                  <a-card :bordered="false" :loading="wrongLoading">
                    <WrongQuestion :dataList="wrongList"/>
                  </a-card>
                </a-col>
                <a-col :span="8">
                  <RankList title="错题排行"
                            :list="currInstanceInfo.stuWrongInfo">
                    <template v-slot:icon>
                      <a-popover placement="left"
                                 title="成绩分析">
                        <template slot="content">
                          <a-table :columns="columns"
                                   rowKey="studentId"
                                   :data-source="currInstanceInfo.stuWrongInfo"
                                   :pagination="false">
                            <span slot="action" slot-scope="text, record">
                              <a @click="lookStuInfo(record.studentId)">学生详情</a>
                            </span>
                          </a-table>
<!--                          <div class="popover__btn">-->
<!--                            <a-button type="link">-->
<!--                              查看更多-->
<!--                              <a-icon type="right" />-->
<!--                            </a-button>-->
<!--                          </div>-->
                        </template>
                        <a-icon type="user" />

                      </a-popover>

                    </template>
                  </RankList>
                </a-col>
              </a-row>
            </a-tab-pane>
            <a-tab-pane key="2"
                        tab="知识点分析"
                        force-render>
              <a-col :span="16">
                <a-card :loading="pointLoading"
                        :bordered="false">
                  <KnowledgePoints :dataList="pointList"/>
                </a-card>
              </a-col>
              <a-col :span="8">
                <RankList title="错题排行"
                          :list="currInstanceInfo.stuWrongInfo">
                </RankList>
              </a-col>
            </a-tab-pane>

          </a-tabs>
        </a-card>
      </a-col>

      <a-col :span="12"
             class="mt">
        <a-card title="最新提问"
                :loading="commentLoading"
                :bordered="false">
          <a-list>
            <a-list-item :key="index"
                         v-for="(item, index) in newComment">
              <a-list-item-meta>
                <a-avatar slot="avatar"
                          src="https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png" />
                <div slot="title">
                  <span>{{ item.studentName }}</span>:&nbsp;
                  {{ item.commentContent }}
                </div>
                <div slot="description">{{ moment(item.gmtCreate).format('YYYY-MM-DD HH:ss') }}</div>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>

      <a-col :span="12"
             class="mt">
        <a-card title="访客统计"
                :loading="visitorLoading"
                :bordered="false">
          <Browse :dataList="visitorList"/>
        </a-card>
      </a-col>

    </a-row>

  </div>

  <!-- <a-card class="project-list"
                style="margin-bottom: 24px;"
                :bordered="false"
                :loading="commentLoading"
                title="最新提问"
                :body-style="{ padding: 0 }">
          <div>
            <a-card-grid class="project-card-grid"
                         :key="i"
                         v-for="(item, i) in newComment">
              <a-card :bordered="false"
                      :body-style="{ padding: 0 }">
                <a-card-meta>
                  <div slot="title"
                       class="card-title">
                    <a-avatar size="small"
                              src="https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png" />
                    <a>{{ item.studentName }}</a>
                  </div>
                  <div slot="description"
                       class="card-description">
                    {{ item.commentContent }}
                  </div>
                </a-card-meta>
                <div class="project-item">
                  <span class="datetime">{{ moment(item.gmtCreate).fromNow() }}</span>
                </div>
              </a-card>
            </a-card-grid>
          </div>
        </a-card> -->
</template>

<script>
import moment from 'moment'
import WrongQuestion from './components/WrongQuestion'
import Browse from './components/Browse'
import KnowledgePoints from './components/KnowledgePoints'

import { queryPeople, countInstanceInfo, queryNewComment, queryWrong, queryVisitorAndSign, queryWrongPoint } from '@/api/basic/statistics'
import { queryInsByTeaCouId } from '@/api/basic/teacherCourseInstance'
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  // NumberInfo,
  MiniSmoothArea
} from './components'
import Trend from '@/components/Trend'

// const rankList = []
// for (let i = 0; i < 7; i++) {
//   rankList.push({
//     name: '错题 ' + (i + 1),
//     total: 1234.56 - i * 100
//   })
// }

const columns = [
  {
    title: '姓名',
    dataIndex: 'studentName',
    key: 'name'
  },
  {
    title: '成绩',
    dataIndex: 'score',
    key: 'score'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

// const data = [
//   {
//     key: '1',
//     name: '成同学',
//     age: 32
//   }
// ]

export default {
  name: 'CourseStatistics',
  data() {
    return {
      loadingSale: false,
      allSale: {},
      weekSale: 'default',
      daySale: 'default',
      newOrder: [],
      newComment: [],
      orderLoading: false,
      commentLoading: false,
      wrongLoading: false,
      visitorLoading: false,
      wrongList: [],
      instanceList: [],
      visitorList: [],
      currInstanceInfo: {},
      teacherCourseId: '',
      pointLoading: false,
      pointList: {},

      tabActive: '1',

      // 当前选择题目
      currInstance: null,

      columns
    }
  },
  components: {
    Browse,
    WrongQuestion,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    // NumberInfo,
    MiniSmoothArea,
    KnowledgePoints
  },
  created() {
    const teacherCourseId = sessionStorage.getItem('teacherCourseId')
    if (teacherCourseId != null) {
      this.teacherCourseId = teacherCourseId
      this.queryPeople(teacherCourseId)
      // this.queryNewOrder(teacherCourseId)
      this.queryNewComment(teacherCourseId)
      this.queryInsByTeaCouId(teacherCourseId)
      this.queryVisitorAndSign(teacherCourseId)
    } else {
      this.$router.push({ name: 'teacher-course' })
    }
  },
  methods: {
    moment,
    onTabChange() {
      // if (parseInt(this.tabActive) === 1) {
      //   this.queryWrong(this.teacherCourseId, this.instanceId)
      // } else {
      //   this.queryWrongPoint(this.teacherCourseId, this.instanceId)
      // }
    },
    lookStuInfo (val) {
      console.log(val)
    },
    queryWrongPoint (teacherCourseId, instanceId) {
      this.pointLoading = true
      queryWrongPoint({ teacherCourseId, instanceId })
          .then(res => {
            if (res.result && res.result.pointName && res.result.pointName.length > 0) {
              this.pointList = res.result
              this.pointLoading = false
            } else {
              this.pointList = {
                pointName: [],
                fatherName: []
              }
              this.pointLoading = false
            }
          }).catch((err) => {
            this.pointLoading = false
            this.$message.error('获取错题知识点分布失败')
          })
    },
    handleChange() {
      this.countInstanceInfo(this.teacherCourseId, this.currInstance)
      this.queryWrong(this.teacherCourseId, this.currInstance)
      this.queryWrongPoint(this.teacherCourseId, this.currInstance)
    },
    queryVisitorAndSign (teacherCourseId) {
      this.visitorLoading = true
      queryVisitorAndSign({ teacherCourseId })
          .then(res => {
            if (res.result && res.result.length > 0) {
              this.visitorList = res.result
              this.visitorLoading = false
            } else {
              this.visitorList = []
              this.visitorLoading = false
            }
          })
          .catch(() => {
            this.visitorLoading = false
            this.$message.error('获取访问报名失败')
          })
    },
    queryInsByTeaCouId(teacherCourseId) {
      queryInsByTeaCouId({ teacherCourseId })
        .then(res => {
          if (res.result && res.result.length > 0) {
            this.instanceList = res.result
            this.currInstance = res.result[0].instanceId
            this.countInstanceInfo(this.teacherCourseId, this.currInstance)
            this.queryWrong(this.teacherCourseId, this.currInstance)
            this.queryWrongPoint(this.teacherCourseId, this.currInstance)
          } else {
            this.instanceList = []
            this.currInstance = null
          }
        })
        .catch(() => {
          this.$message.error('获取试卷列表失败')
        })
    },
    queryWrong(teacherCourseId, instanceId) {
      this.wrongLoading = true
      queryWrong({ teacherCourseId, instanceId })
        .then(res => {
          if (res.result && res.result.length > 0) {
            this.wrongList = res.result
          } else {
            this.wrongList = []
          }
          this.wrongLoading = false
        })
        .catch(() => {
          this.wrongLoading = false
          this.$message.error('获取错题列表失败')
        })
    },
    queryNewComment(teacherCourseId) {
      this.commentLoading = true
      queryNewComment({ teacherCourseId })
        .then(res => {
          this.commentLoading = false
          this.newComment = res.result
        })
        .catch(() => {
          this.commentLoading = false
          this.$message.error('获取提问列表失败')
        })
    },
    countInstanceInfo(teacherCourseId, instanceId) {
      this.orderLoading = true
      countInstanceInfo({ teacherCourseId, instanceId })
        .then(res => {
          this.orderLoading = false
          this.currInstanceInfo = res.result
        })
        .catch(() => {
          this.orderLoading = false
          this.$message.error('获取试卷详情失败')
        })
    },
    queryPeople(teacherCourseId) {
      this.loadingSale = true
      queryPeople({ teacherCourseId })
        .then(res => {
          this.loadingSale = false
          // if (res.result.compareWeek === 0) {
          //   this.weekSale = 'default'
          // } else if (res.result.compareWeek > 0) {
          //   this.weekSale = 'up'
          // } else {
          //   this.weekSale = 'down'
          // }
          // if (res.result.compareDay === 0) {
          //   this.daySale = 'default'
          // } else if (res.result.compareDay > 0) {
          //   this.daySale = 'up'
          // } else {
          //   this.daySale = 'down'
          // }
          this.allSale = res.result
        })
        .catch(() => {
          this.loadingSale = false
          this.$message.error('获取销售图表失败')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.sts {
  width: 100%;
  height: 100%;
}

.tab__content {
  padding: 0 10px 10px;
}

.project-list {
  .card-title {
    font-size: 0;

    a {
      color: rgba(0, 0, 0, 0.85);
      margin-left: 12px;
      line-height: 24px;
      height: 24px;
      display: inline-block;
      vertical-align: top;
      font-size: 14px;

      &:hover {
        color: #1890ff;
      }
    }
  }

  .card-description {
    color: rgba(0, 0, 0, 0.45);
    height: 44px;
    line-height: 22px;
    overflow: hidden;
  }

  .project-item {
    display: flex;
    margin-top: 8px;
    overflow: hidden;
    font-size: 12px;
    height: 20px;
    line-height: 20px;

    a {
      color: rgba(0, 0, 0, 0.45);
      display: inline-block;
      flex: 1 1 0;

      &:hover {
        color: #1890ff;
      }
    }

    .datetime {
      color: rgba(0, 0, 0, 0.25);
      flex: 0 0 auto;
      float: right;
    }
  }

  .ant-card-meta-description {
    color: rgba(0, 0, 0, 0.45);
    height: 42px;
    line-height: 22px;
    overflow: hidden;
  }
}

.top__card {
  display: flex;
  align-items: center;
  height: 48%;

  /deep/ .ant-card-body {
    padding: 28px;
  }

  .top__card--content {
    margin: 0;
    color: rgb(141, 141, 141);
    vertical-align: middle;
  }

  .icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: #1890ff;
    border-radius: 50%;
    vertical-align: middle;
    position: relative;
    top: -2px;

    i {
      color: #fff;
    }
  }

  .num {
    font-size: 18px;
    color: #000;
    margin-left: 5px;
  }
}

.extra-wrapper {
  padding-right: 10px;
}

.mt {
  margin-top: 15px;
}

.popover__btn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
